<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件修饰符</title>
</head>

<body>
    <div id="app">
        <div>{{num}}</div>
        <div v-on:click="handle0">
            <button v-on:click.stop="handle1">点击</button>
            <!-- 事件修饰符可以简化操作，简化阻止事件冒泡情况 .stop -->
        </div>
        <div>
            <a href="http://www.baidu.com" v-on:click.prevent="handle2">百度</a>
            <!-- 事件修饰符.prevent 阻止事件默认行为 -->
        </div>
    </div>

    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                num: 0,
            },
            methods: {
                handle0: function() {
                    this.num++;
                },
                // 事件冒泡让点击handle1触发了点击handle0事件
                handle1: function(event) {
                    // 阻止冒泡
                    // event.stopPropagation();
                    // 阻止事件冒泡，
                },
                handle2: function(event) {
                    //阻止默认行为
                    // event.preventDefault();
                    // 原生js api 阻止默认行为
                },
            },
        });
    </script>
</body>

</html>